
$distance: 2, 4, 6, 8, 10, 12, 14, 20;

@each $d in $distance {
  .mr-#{$d} {
    margin-right: #{$d}px;
  }
  .ml-#{$d} {
    margin-left: #{$d}px;
  }
  .mb-#{$d} {
    margin-bottom: #{$d}px;
  }
  .mt-#{$d} {
    margin-top: #{$d}px;
  }
  .flex-gap-#{$d} {
    gap: #{$d}px;
  }
}
.ml-a {
  margin-left: auto;
}

$fontsizes: 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 40, 48, 64;
@each $d in $fontsizes {
  .fs-#{$d} {
    font-size: #{$d}px;
  }
}

$heightsizes: 28, 36;
@each $d in $heightsizes {
  :host {
    .h-#{$d} {
      height: #{$d}px;
    }
  }
}

.w-full {
  width: 100%;
}

.font-color-seceond {
  color: rgba($color: $font-color-main, $alpha: 0.7);
}
.text-center {
  text-align: center;
}

.basic-full {
  flex: 1 1 100%;
}
.fs-c-7{
  color: rgba(255,255,255, 0.7);
}
.fs-c-5 {
  color: rgba(255,255,255, 0.5);
}
.fs-c-3 {
  color: rgba($color: $font-color-main, $alpha: 0.3);
}
.fs-c-1 {
  color: rgba($color: $font-color-main, $alpha: 0.1);
}
.fs-b {
  font-weight: bold;
}
.fs-n {
  font-weight: normal;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.color-success {
  color: $color-succes;
}
.color-error {
  color: $color-error;
}
.vip-color {
  color: $vip-color;
}
.vip-color-primary {
  color: $color-vip-primary;
}
.color-text {
  color: $color-font;
}

.link {
  color: $color-primary;
  cursor: pointer;
}
.link-color {
  color: $color-primary;
}
.cursor {
  cursor: pointer;
}
.hover-svg {
  cursor: pointer;
  &:hover {
    color: $color-primary;
  }
}
.hover-color {
  cursor: pointer;
  &:hover {
    color: $color-primary !important;
  }
}
.border-trasnsparent {
  border: 1px solid transparent;
}
.hover-border {
  cursor: pointer;
  &:hover {
    border-color: $color-primary !important;
  }
}
.hover-opacity {
  opacity: 0.7;
  &:hover {
    opacity: 1;
  }
}
.hover-link {
  cursor: pointer;
  &:hover {
    color: $color-primary;
    text-decoration: underline;
  }
}
.btn-vip-primary {
  color: #7B4801 !important;
  background: linear-gradient( 180deg, #FFF1D4 0%, #FCE2B1 100%) !important;
  &:hover {
    background: linear-gradient( 180deg, #FFE5B4 0%, #FFD583 100%) !important;
  }
}
.btn-vip-primary1 {
  background: linear-gradient( 180deg, #9C60FF 0%, #C360FF 100%) !important;
  &:hover {
    background: linear-gradient( 180deg, #8439FF 0%, #B43BFF 100%) !important;
  }
}
.pos-t-1 {
  position: relative;
  top: -1px;
}
.pos-2 {
  position: relative;
  top: 2px;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.flex-basic {
  display: flex;
  align-items: center;
}
.flex-1 {
  flex: 1;
}
.hightlight-span {
  color: $color-primary;
}
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
  outline: none;
  &.tour-active {
    border: 2px solid $color-primary;
    border-radius: 6px;
    box-sizing: border-box;
  }
}

/* 滚动条整体样式 */
::-webkit-scrollbar {
  width: 4px; /* 宽度 */
  height: 4px; /* 高度 */
}

/* 滚动条滑块样式 */
// ::-webkit-scrollbar-thumb {
//   background: #b6b6b6; /* 滑块颜色 */
//   border-radius: 4px; /* 滑块圆角 */
//   transition: background 0.3s; /* 背景色过渡效果 */
// }

/* 滚动条滑块在鼠标悬停时的样式 */
// ::-webkit-scrollbar-thumb:hover {
//   background: #555; /* 鼠标悬停时的滑块颜色 */
// }

/* 滚动条轨道样式 */
::-webkit-scrollbar-track {
  background: transparent; /* 轨道颜色 */
  border-radius: 4px; /* 轨道圆角 */
}

/* 滚动条轨道在鼠标悬停时的样式 */
::-webkit-scrollbar-track:hover {
  background: transparent; /* 鼠标悬停时的轨道颜色 */
}

/* 滚动条角落样式 */
::-webkit-scrollbar-corner {
  // background: #dddee0; /* 角落颜色 */
}

.eva-fade-in-enter-active,
.eva-fade-in-leave-active {
  transition: opacity 0.3s cubic-bezier(0.55, 0, 0.1, 1);
}

.eva-fade-in-enter-from,
.eva-fade-in-leave-active {
  opacity: 0;
}

.eva-fade-in {
  &-enter-active {
    transition: opacity 0.3s linear;
    position: absolute;
    width: 100%;
    z-index: 2;
  }
  &-enter-from {
    opacity: 0;
  }
  &-enter-to {
    opacity: 1;
  }
  &-leave-active {
    transition: opacity 0.3s linear;
    width: 100%;
    position: absolute;
    z-index: 1;
  }
  &-leave-form {
    opacity: 1;
  }
  &-leve-to {
    opacity: 0;
  }
}

/* 代码格式 */
.pre__code {
  margin: 10px 0;
}
.pre__code__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: 1.2;
  padding: 6px;
  height: 20px;
  background: lighten($color: #222, $amount: 2%);
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  text-transform: capitalize;
}
code.hljs {
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}
.pre__code__header .svg-icon {
  width: 1em;
  height: 1em;
  cursor: pointer;
}

.markedown__body {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin-top: 6px;
    &:first-of-type {
      margin-top: 0;
    }
  }
  p {
    margin-top: 6px;
  }
  a {
    color: $color-primary;
    text-decoration: none;
    padding: 0 4px;
    word-wrap: break-word;
    white-space: normal;
  }
  img {
    width: 100%;
    height: auto;
  }
  hr {
    margin: 0.5em 0;
    border: 0;
    height: 1px;
    background: $color-white;
    border-style: none;
  }
}
